import { useEffect, useLayoutEffect, useState } from "react";
import { CustomIcon, Title } from "../../../components";
import styles from './index.module.less'
import { Skeleton } from "antd";
import { CURRENT_NODE_TYPE, iconMap } from "../../../consts";
import { useLocation, useNavigate } from "react-router-dom";
const FolderPage = () => {
    const location = useLocation()
    const navigate = useNavigate()
    const { node = { children: [] } } = location?.state
    const nodeList = node?.children || []
    const [isLode] = useState(true)
    let md: number = 0;
    let excel: number = 0;
    let folder: number = 0;
    const statistics = () => {
        nodeList.length && nodeList.map((item: CURRENT_NODE_TYPE) => {
            item.dropType === 'folder' ? folder++ : item.dropType === 'md' ? md++ : excel++
        })
        return <div className={styles.statisticsBox}> {folder !== 0 && `${folder} 文件夹`} {md !== 0 && `${md} 文档`} {excel !== 0 && `${excel} 表格`}</div>
    }
    const createCatalogue = (list: CURRENT_NODE_TYPE[]) => {
        return list.map((item: CURRENT_NODE_TYPE) => {
            let childNodes: React.ReactNode | null = null;

            if (item.children) {
                childNodes = createCatalogue(item.children);
            }
            // return <div></div>
            return <div className={styles.catalogueItemBox} key={item.key}>
                <div onClick={() => {
                    navigate(`/myfile/${item.dropType}/${item.key}`, { state: { node: item } })
                }} className={styles.catalogueItemTitle}>{item?.title} <hr /> <span className={styles.updataTime}>{'更新时间'}</span></div>
                <div className={styles.catalogueItemChildren}>{childNodes}</div>
            </div>
        });
    };
    return <div style={{padding:'0px 22px'}}>
        <div className={styles.folderPageBox}>
             {isLode ? <>
            <Title icon={node && iconMap[node.dropType]} title={`${node?.title}`} size={24} />
            {statistics()}
            <br />
            <div>{node?.folderDescribe}</div>
            <br />
            <div>
                <p>👋  欢迎来到文件夹</p>
                <p>文件夹就像书一样，让多篇文档结构化，方便知识的创作与沉淀</p>
            </div>
            <div className={styles.catalogue}>
                <Title title={'目录'} style={{ margin: 0 }} level={5} />
                <div className={styles.catalogueTree}>
                    {createCatalogue(nodeList)}
                </div>
            </div>
        </> :
            <div>
                <Skeleton avatar active />
                <br />
                <Skeleton active />
                <br />
                <br />
                <Skeleton active />
            </div>}
        </div>
       
    </div>
    // return <></>
}

export default FolderPage;